<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 3D图像反转</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        width: 200px;
        height: 200px;
        margin: 100px auto;
        perspective: 500px;
        border: 1px solid red;
    }
    .box{
        transform-style: preserve-3d;
        width: 200px;
        height: 200px;
        transition: all 3s;
        position: relative;
    }
    .container:hover .box{
        transform: rotateY(180deg);
    }
    .box img{
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .box img:nth-child(1){
        /* 第一张图片背向我们的时候能看到 */
        backface-visibility: hidden;
        z-index: 1;
    }
    .box img:nth-child(2){
        transform: rotateY(180deg);
    }

</style>
<body>
    <div class="container">
        <div class="box">
            <img src="http://p9.qhimg.com/bdm/480_296_0/t0113ebf800403ea98f.jpg" alt="">
            <img src="http://p0.qhimg.com/bdm/480_296_0/t01826471e13b1d97ba.jpg" alt="">
        </div>
        
        
    </div>
</body>
</html>